<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: MSI-PC
  Date: 2021/8/24
  Time: 8:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <% String path = request.getContextPath();%>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- 引入本地css -->
<%--  <link rel="stylesheet" type="text/css" href="<%=path%>/css/czc_index.css"/>--%>
  <link rel="stylesheet" type="text/css" href="https://www.edisoncgh.com/resources/czc_index.css"/>
  <!-- 引入font-awesome -->
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">

  <!-- 引入bootst图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

  <meta charset="utf-8">
  <link rel="icon" type="image/x-icon" href="<%=path%>/img/256x.ico" />
  <title></title>
</head>

<body>

<!-- 头部工具栏 -->
<div class="container">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">czcBlog</a>
      </div>

      <div>
        <ul class="nav navbar-nav">
          <li><a href="${pageContext.request.contextPath}/articleOption/indexArticle"><i class="fa fa-home"></i> 首页</a></li>
          <li><a href="#"><i class="fa fa-list-ul"></i> 归档</a></li>
          <li><a href="#"><i class="fa fa-link"></i> 友链</a></li>
          <li><a href="#"><i class="fa fa-info-circle"></i> 关于</a></li>

        </ul>
      </div>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            操作
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="fa fa-cog"></i> 后台</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
          </ul>
        </li>

      </ul>

      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-primary">检索 <i class="fa fa-search"></i></button>
      </form>

    </div>
  </nav>
</div>

<!-- 抬头内容 -->
<div class="container">
  <div class="page-header text-center">
    <h1>CZC-Blog System</h1>
    <small>A Low-key and Simple Blog</small>
  </div>
</div>

<!-- 页面主体 -->
<div class="container">
  <div class="row">
    <!-- 占位 -->
    <div class="col-md-2"></div>

    <!-- 文章盒子 -->
    <div class="col-md-8 ArticleBox ArticleBox-content">
      <div class="text-center">
<%--        <h3>这是一篇文章</h3>--%>
        <h3><%=request.getSession().getAttribute("art_title")%></h3>
        <h5><%=request.getSession().getAttribute("publish_time")%>></h5>
        <!-- 分类名称 -->
        <span class="label label-primary"><%=request.getSession().getAttribute("art_cate")%></span>
        <!-- 标签们 -->
        <span class="label label-default"><%=request.getSession().getAttribute("art_tag")%></span>
      </div>

      <div>
        <p>
          <%=request.getSession().getAttribute("art_content")%>>
        </p>
<%--        <p>--%>
<%--          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容--%>
<%--        </p>--%>
<%--        <p>--%>
<%--          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容--%>
<%--        </p>--%>
<%--        <p>--%>
<%--          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容--%>
<%--        </p>--%>
      </div>
    </div>

    <!-- 占位 -->
    <div class="col-md-2"></div>
  </div>
  <div class="row">
    <!-- 占位 -->
    <div class="col-md-2"></div>

    <!-- 文章盒子 -->
    <div class="col-md-8 ArticleBox commentBox">
      <h4>文章评论</h4>
      <hr />
      <table>
        <tbody>
        <c:forEach var="comment_info" items="${list}">
          <tr>
            <div class="media">
              <div class="media-left">
                <img src="img/256x.ico" class="media-object" style="width:60px;height: 60px;">
              </div>
              <div class="media-body">
                <h4 class="media-heading">${comment_info.author}<small>发表于${comment_info.com_date}</small> </h4>
                <p>${comment_info.com_text}</p>
              </div>
            </div>
            <hr />
          </tr>
        </c:forEach>

<%--        <tr>--%>
<%--          <div class="media">--%>
<%--            <div class="media-left">--%>
<%--              <img src="img/256x.ico" class="media-object" style="width:60px;height: 60px;">--%>
<%--            </div>--%>
<%--            <div class="media-body">--%>
<%--              <h4 class="media-heading">sifour <small>发表于 1949-10-1</small> </h4>--%>
<%--              <p>评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论...</p>--%>
<%--            </div>--%>
<%--          </div>--%>
<%--          <hr />--%>
<%--        </tr>--%>
        </tbody>
      </table>
    </div>

    <!-- 占位 -->
    <div class="col-md-2"></div>
  </div>
  <div class="row">
    <div class="col-md-2"></div>

    <!-- 文章盒子 -->
    <div class="col-md-8 ArticleBox commentForm">
      <h4>说点什么？</h4>
      <form action="${pageContext.request.contextPath}/commentsOption/addComment" method="post">
        <div class="form-group">
          <input type="text" class="form-control" id="name" placeholder="您的昵称" name="nickname">
          <textarea class="form-control" rows="5" placeholder="请畅所欲言吧" name="user_comments"></textarea>
          <button type="submit" class="btn btn-primary" href="${pageContext.request.contextPath}/commentsOption/addComment">提交评论</button>
        </div>
      </form>
    </div>

    <!-- 占位 -->
    <div class="col-md-2"></div>
  </div>
</div>
</body>

<!-- 页尾 -->
<footer class="text-center">
  <!-- 页脚内容 -->
  <div class="container">
    <p>©2021 CZC</p>
  </div>
  <span id="hitokoto">让我想点骚话....</span>
  <script>
    $.ajax({
      type:"get",
      url:"https://v1.hitokoto.cn/",
      success: function(res) {
        document.getElementById("hitokoto").innerText = res.hitokoto;
        // console.log(res.hitokoto);
      },
      error: function() {
        document.getElementById("hitokoto").innerText = "骚话加载失败QAQ";
      }
    });
  </script>
</footer>
</html>
